<template>
  <view>
    <view class="click-test-child" @click="onChildClick">click-test</view>
    <slot-scope-test :text="'click-test'">
      <template v-slot="{text}">
        <view class="click-test-child" @click="onChildClick">{{text}}</view>
      </template>
    </slot-scope-test>
    <child-test>
      <view class="click-test-child" @click="onChildClick">click-test</view>
    </child-test>
    <child-test>
      <child-test>
        <view class="click-test-child" @click="onChildClick">click-test</view>
      </child-test>
    </child-test>
    <child-test>
      <slot-scope-test :text="'click-test'">
        <template v-slot="{text}">
          <view class="click-test-child" @click="onChildClick">{{text}}</view>
          <child-test>
            <view class="click-test-child" @click="onChildClick">click-test</view>
          </child-test>
          <slot-scope-test :text="'click-test'">
            <template v-slot="{text}">
              <view class="click-test-child" @click="onChildClick">{{text}}</view>
            </template>
          </slot-scope-test>
        </template>
      </slot-scope-test>
    </child-test>
    <child-test>
      <child-test>
        <slot-scope-test :text="'click-test'">
          <template v-slot="{text}">
            <view class="click-test-child" @click="onChildClick">{{text}}</view>
          </template>
        </slot-scope-test>
      </child-test>
    </child-test>
  </view>
</template>

<script>
import childTest from './child-test'
import slotScopeTest from './slot-scope-test'

export default {
  components: {
    childTest,
    slotScopeTest
  },
  data () {
    return {
      index: 0
    }
  },
  methods: {
    onChildClick (event) {
      console.log('onChildClick:', event)
      this.index++
      let $parent = this.$parent
      // #ifdef H5
      $parent = $parent.$parent
      // #endif
      $parent.index++
      return event
    }
  }
}
</script>

<style>
</style>